<template>
   <!-- 图片和文字的引入 -->
    <div class="Shoot-list">
        <div class="Shoot-item">
            <img 
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=89449157,3584853333&fm=26&gp=0.jpg" alt="">
   <h1 class="title">小米</h1>
   <div class="info">
       <p class="price">
           <span class="now">$1999</span>
           <span class="old">$1899</span>
       </p>
       <p class="sell">
        <span>热卖中</span>
        <span>剩60件</span>
       </p>   
   </div>
   </div>

      <div class="Shoot-item">
            <img 
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=89449157,3584853333&fm=26&gp=0.jpg" alt="">
   <h1 class="title">小米</h1>
   <div class="info">
       <p class="price">
           <span class="now">$1999</span>
           <span class="old">$1899</span>
       </p>
       <p class="sell">
        <span>热卖中</span>
        <span>剩60件</span>
       </p>   
   </div>
    </div>
      <div class="Shoot-item">
            <img 
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=89449157,3584853333&fm=26&gp=0.jpg" alt="">
   <h1 class="title">小米</h1>
   <div class="info">
       <p class="price">
           <span class="now">$1999</span>
           <span class="old">$1899</span>
       </p>
       <p class="sell">
        <span>热卖中</span>
        <span>剩60件</span>
       </p>   
   </div>
   </div>
    </div>
    
     
</template>

<script>
// export default {
//     data(){
//         //data 是往自己组件内部，挂载一些私有数据的
//         return{
//             pageindex: 1,//分页的页数
//             goodslist:[]//存放商品列表的数组
//         };
//     },
//     created(){ //调用
//         this.getGoodsList();
//     },
//     methods: {
//         getGoodsList(){
//                     // 这个是获取  Shoot 商品列表的
//                     this.$http
//                     .get('api/getgoods?pageindex=' + this.pageindex)
//                     .then(result => {
//                         if(result.body.status ===0) {
//                             this.goodslist =result.body.message;

//                         }
//                     })
//         }
//     }
// }
</script>

<style lang="scss" scoped>
.Shoot-list{ //图片布局
display: flex; //左右布局
flex-wrap: wrap;
padding: 7px;// 边距
justify-content: space-between;//内容对齐  弹性项目平均分布在该行上
}
.Shoot-item{
    width: 49%; //图片宽度
    border: 1px solid #ccc;//设置边框
    box-shadow: 0 0 8px #ccc;
    margin: 3px 0;
    padding: 2px;
   
    display: flex;  //这个是垂直向下布局
    flex-direction: column;
    justify-content: space-between;

    min-height: 171px;//设置图片最小大小
    img{
        width: 100%;
    }
    .title{
        font-size: 14px;
    }          //.Shoot-list  Shoot-item//这两个设置以后，大致的左右两部分就有了
   
    .info{
        background-color: #eee; //图片的背景颜色
        P{  //定义  边距
            margin: 0;
            padding: 5px;
        }
        .price{
            .now{
                color: red; //颜色
                font-weight: bold; //字体加粗
                font-size: 16px;   //字体大小
            }
            .old{
                text-decoration: line-through;// 金额 添加下划线
                font-size: 12px;
                margin-left: 10px;
            }
        }
        .sell{
            display:flex;
            justify-content: space-between; //自动布局对齐
            font-size: 12px;
        }
    }


}

</style>
